﻿<!DOCTYPE html />
<html >
<head>
    <title>导航控件</title>   
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    
    <style>
        body,html,div
        {
               padding:0px;
               margin:0px;  
            }
            body,html
            {
                width:100%;
                height:100%;
                }
    </style>
    <script src="../../lib/XiaoFuMap.js" type="text/javascript"></script>     
    <script type="text/javascript">
        var map, svgLayer_point;
        var control = null;
        function load() {
            if (window.navigator.onLine) {
               // window.applicationCache.update();
            }

            var h = $("body").height() - parseFloat($("#MapContainer").css("border-top-width")) - parseFloat($("#MapContainer").css("border-bottom-width"));
            var w = $("body").width() - parseFloat($("#MapContainer").css("border-left-width")) - parseFloat($("#MapContainer").css("border-right-width")); ;
            
            $("#MapContainer").css("width", w).css("height", h);
            map = new XiaoFu.Map("#MapContainer");
            var layer = new XiaoFu.GoogleCacheLayer(GoogleUrl.Map);
            map.addLayer(layer);
            svgLayer_point = new XiaoFu.SVGLayers("point");
            map.addLayer(svgLayer_point);

            control = new XiaoFu.Navigation();
            control.addEventListener("GetLocation", function (evtType, data) {
                var destProj = new XiaoFu.Projection("EPSG:900913");
                var sourceProj = new XiaoFu.Projection("WGS84");
                var pointSource = new XiaoFu.GeoPoint(data.location.x, data.location.y);
                var transform = new XiaoFu.Transform();
                var pointDest = transform.transform(sourceProj, destProj, [pointSource]);
                var svg_Geo = new XiaoFu.SVG_Point(0, "location", pointDest[0].x, pointDest[0].y);
                svg_Geo.fill = "blue";
                svgLayer_point.addChild(svg_Geo);
                map.panTo(new XiaoFu.GeoPoint(pointDest[0].x, pointDest[0].y));
            });
            control.addEventListener("ClearLocation", function (evt) {
                svgLayer_point.removeAll();
            });
            map.addControl(control);           
        }
    </script>
</head>
<body onload="load()">
   
       <div id="MapContainer" style="z-index: 10000; border: 0px solid blue; position: relative; padding:0px; margin:0px;
        width:100%; height:100%;">
    </div>   
  
  
</body>
</html>
